<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
    <!-- BEGIN 全局样式 -->
    <link rel="stylesheet" href="../../../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="../../../css/reset-diy.css" type="text/css">
    <link rel="stylesheet" href="public.css">
    <title>上周信息汇总</title>
</head>
<body>
<div class="container-fluid pt-20">
    <!--上半部分-->
    <div>
        <div id="left" class="pull-left">
            <div class="left-data left-top">
                <div class="total-people f-l">
                    <div class="number left-schools">0</div>
                    <div class="text">全校人数</div>

                </div>
                <div data-status="0" class="unusual late-people f-r">
                    <div class="number left-late">0</div>
                    <div class="text">迟到人数</div>
                </div>
            </div>

            <div class="left-data left-bottom">
                <div data-status="1" class="unusual leave-people f-l">
                    <div class="number left-leaveEarly">0</div>
                    <div class="text">早退人数</div>
                </div>
                <div data-status="2" class="unusual absenteeism-people f-r">
                    <div class="number left-absenteeism">0</div>
                    <div class="text">旷工人数</div>
                </div>
            </div>

        </div>
        <div id="right">
            <div id="late">
                <div class="content">
                    <div class="number">0%</div>
                    <div class="text">迟到比例</div>
                </div>
            </div>
            <div id="leaveEarly">
                <div class="content">
                    <div class="number">0%</div>
                    <div class="text">早退比例</div>
                </div>
            </div>
            <div id="absenteeism">
                <div class="content">
                    <div class="number">0%</div>
                    <div class="text">旷工比例</div>
                </div>
            </div>
        </div>
    </div>
    <!--下半部分-->
    <div class="row">
        <div class="below">
            <div class="col-md-3 col-sm-3">
                <div class="items">
                    <div style="width:100%">
                        <div class="number"><span class="staff_count">0</span>人</div>
                        <div class="text">教职工人数</div>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-sm-3">
                <div class="items">
                    <div style="width:100%">
                        <div class="number"><span class="in_max">0</span>小时</div>
                        <div class="text">最长在岗时长</div>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-sm-3">
                <div class="items">
                    <div style="width:100%">
                        <div class="number"><span class="in_min">0</span>小时</div>
                        <div class="text">最短在岗时长</div>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-sm-3">
                <div class="items duration" data-status="6">
                    <div style="width:100%">
                        <div class="number"><span class="in_average">0</span>人</div>
                        <div class="text">在岗时长不足<span class="hours"></span>小时</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--核心脚本sss-->
<script src="../../../lib/jquery/1.9.1/jquery.js" type="text/javascript" charset="utf-8"></script>
<!--[if lt IE 9]>
<script src="../../../js/excanvas.min.js"></script>
<script src="../../../js/respond.min.js"></script>
<![endif]-->
<!--加密插件sss 必须放在jquery.myPlugIn_v1.0.js前面-->
<script src="../../../js/common/jsrsasign-all-min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/common/crypto-js.min.js" type="text/javascript" charset="utf-8"></script>
<!--加密插件eee-->

<!--<script src="../../js/bootstrap.min.js" type="text/javascript"></script>-->
<!--<script src="../../js/jquery.cookie.min.js" type="text/javascript"></script>-->
<script src="../../../lib/layer/2.4/layer.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="../../lib/laypage/1.2/laypage.js" type="text/javascript" charset="utf-8"></script>-->
<script src="../../../js/radialIndicator.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/work-box.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/common/jquery.myPlugIn_v1.0.js" type="text/javascript" charset="utf-8"></script>

<script>
    var T = new Extend_base();
    jQuery(document).ready(function () {
        function Summarizing() {
            this.initCircle();
            this.getData();
            this.clickEvent();
        }

        Summarizing.prototype = {
            radius: 0, // 半径,画圆时不包括边宽:  半径: 80, 边宽20, 最终:200宽
            initCircle: function () {
                // set  width and height of left
                var left = $("#left");
                var summarizing = $("#late,#leaveEarly,#absenteeism");
                var width = $("#late").width();

                left.height(width);
                summarizing.height(width);

                this.radius = width / 2 - 35;

                // font size
                $("#right .number").css({fontSize: this.radius / 2 - 5});
                $("#right .text").css({fontSize: this.radius / 3.2 + "px"});

                // dist adjust vertical center
                var content = $("#right .content");
                content.css({marginTop: -(content.height() / 2) + "px"});
            },
            clickEvent: function () {
                var _this = this;
                $(".unusual").on("click", function () {
                    T.saveSession("status", $(this).data("status"));
                    T.saveSession("type", 1); // "1" 代表上周, "2" 上学期
                    _this.showDetail();
                });
                // 在岗时长
                $(".duration").on('click', function () {
                    T.saveSession("status", $(this).data("status"));
                    T.saveSession("type", 1); // "1" 代表上周, "2" 上学期
                    _this.showDetail('duration-details.html');
                });
            },
            getData: function () {
                var _this = this;
                T.ajaxSecret(url_join("statistics/week"), "post", {}, function (res) {
                    _this.renderCircle(res.data);
                });
            },
            renderCircle: function (data) {

                var total = data.total || 0, late = data.later_num || 0, leaveEarly = data.early_num || 0,
                    absenteeism = data.absenteeism_num || 0;

                // set number ratio
                var late_ratio = Math.floor(late / total * 100);
                var leaveEarly_ratio = Math.floor(leaveEarly / total * 100);
                var absenteeism_ratio = Math.floor(absenteeism / total * 100);

                // set top-left number
                $(".left-schools").text(total);
                $(".left-late").text(late);
                $(".left-leaveEarly").text(leaveEarly);
                $(".left-absenteeism").text(absenteeism);


                $("#late .number").text((late_ratio || 0) + "%");
                $("#leaveEarly .number").text((leaveEarly_ratio || 0) + "%");
                $("#absenteeism .number").text((absenteeism_ratio || 0) + "%");

                // set bottom number
                $(".staff_count").text(data.staff_count);
                $(".in_max").text(data.hours_max);
                $(".in_min").text(data.hours_min);
                $(".in_average").text(data.insufficient_counts);
                $(".hours").text(data.insufficient_hours);

                // render circle
                this.circle('#late', '#0066ff', this.radius, late_ratio);
                this.circle('#leaveEarly', '#dd0000', this.radius, leaveEarly_ratio);
                this.circle('#absenteeism', '#000000', this.radius, absenteeism_ratio);
            },
            circle: function (ele, color, radius, val) {
                $(ele).radialIndicator({
                    barColor: color,
                    barWidth: 26,
                    initValue: val,
                    percentage: true,
                    displayNumber: false,
                    radius: radius || 60
                });
            },
            submitEvent: function () {
                var _this = this;

            },
            showDetail: function (url) {
                layer.open({
                    type: 2,
                    title: "详情",
                    area: ["100%", "100%"],
                    content: url || "details.html",
                    end: function () {
                        console.log("the detail is close!");
                    }
                });
            }
        };
        new Summarizing();
    });
</script>
</body>
</html>